﻿@{
    ViewBag.Title = "ExportTestLib";
    Layout = "~/Views/Shared/_GridCommonLayout.cshtml";
}



<style>
    .jarviswidget > div {

        border: 0;
    }

    .tab-pane {
        margin: 30px 20px;
        padding: 20px;
        border: 1px solid;
    }

    <!-- 消除部分div的show的不完整-- > 
         #login {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        overflow: visible;
    }

    .form-actions {
        margin: 10px 0 0!important;
        background-color: white;
    }
  
</style>

<!--/详细TestLib对话框-->

<!--新增试题-->

<div id="content" style="opacity: 1;">

    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark"><i class="fa fa-pencil-square-o fa-fw "></i>《@ViewBag.name》 <span>&gt;
			新增试题向导 </span></h1>
    </div>


    <div class="row">

        <!-- NEW WIDGET START -->
        <article class="col-sm-12 col-md-12 col-lg-12">

            <!-- Widget ID (each widget will need unique ID)-->
            <div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" data-widget-editbutton="false" data-widget-deletebutton="false">


                <!-- widget div-->
                <div>

                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->

                    </div>
                    <!-- end widget edit box -->

                    <!-- widget content -->
                    <div class="widget-body">

                        <div class="row">

                            <div id="bootstrap-wizard-1" class="col-sm-12">
                                <div class="form-bootstrapWizard">
                                    <ul class="bootstrapWizard form-wizard" style="margin-left: 15%;">
                                        <li class="active" data-target="#step1">
                                            <a href="#tab1" data-toggle="tab">
                                                <span class="step">1</span>
                                                <span class="title">编辑查询条件</span> </a>
                                        </li>
                                        <li data-target="#step2">
                                            <a href="#tab2" data-toggle="tab">
                                                <span class="step">2</span> <span class="title">编辑试题</span> </a>
                                        </li>
                                        <li data-target="#step3">
                                            <a href="#tab3" data-toggle="tab">
                                                <span class="step">3</span> <span class="title">预览</span> </a>
                                        </li>
                                        

                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="tab-content">
                                    <!--选择试题类型-->
                                    <div class="tab-pane active" id="tab1" style="border: solid 1px pink;">
                                        <br>
                                        <h3><strong>第一步:</strong> 选择试题类型</h3>

                                       

                                    </div>



                                    <!--试题编辑-->
                                    <div class="tab-pane" id="tab2">
                                        <br>
                                        <h3><strong>第二步:</strong> 编辑试题</h3>

                                        <!--编辑试题-->

                                        <!--修改9.3解决先前在选择试题类型的时候会同时出现编辑试题页面的内容将 <div class="tap-content">中的class改为tap-pane-->
                                        <form class="smart-form"  id="submitform" >
                                            <div>


                                                <div class="row" style="margin-left: 3%; margin-right: 3%">
                                                    <label><strong style="font-size: 15px">所属题型:&nbsp </strong></label>
                                                    <label data-bind="text:$root.QuestionKind"></label>
                                                    <label class="toggle state-error " style="float: right; font-size: 15px; margin-top: -1px">
                                                        <input type="checkbox" checked="checked" name="checkbox-toggle" value="1">
                                                        <i data-swchoff-text="OFF" data-swchon-text="ON"></i>是否对学生公开</label>



                                                </div>

                                                <!--test-->
                                                <div class="row" style="margin-left: 3%; margin-right: 3%">
                                                    <label><strong style="font-size: 15px">标题</strong><label class="txt-color-red">(*必填100字以内)</label>:</label>
                                                   <label class="textarea textarea-expandable">
                                                        <textarea id="TitleId" class="custom-scroll" rows="3" placeholder='添加标题'>
                                                                </textarea>
                                                      
                                                    </label>
                                                  

                                                </div>
                                                <!--内容编辑-->
                                                <div  id="ContentId" class="row " style="margin-left: 3%; margin-right: 3%; margin-top: 10px">

                                                    <label style="margin-top: 2px;"><strong style="font-size: 15px">内容:</strong></label>
                                                    <button id="edit" class="btn btn-primary pull-right" type="button">
                                                        <i class="fa fa-angle-double-down"></i>
                                                    </button>
                                                    <div id="editorId" style="display: none; height: 180px;margin-top:15px;">
                                                    </div>


                                                </div>
                                                <!--/内容编辑-->

                                                <!--答案判断题test foreach: TFrecordSet-->
                                                <div id="QuesAnswerId"class="row " style="margin-left: 3%; margin-right: 3%; margin-top: 10px">
                                                    <label style="float:left"><strong style="font-size: 15px;">答案:</strong></label>
                                                    <table class="smart-form" style="float:left;margin-left:20px;">
                                                        <tr data-bind="foreach: TFrecordSet">
                                                            <td style="width: 200px;float:left ">
                                                                 <label class="radio state-success">
                                                                      <input type="radio" name="answerRadio" data-bind="value:Id">
                                                                      <i></i>
                                                                     <span data-bind='text: SOptionName'"></span>
                                                                 </label>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>

                                                <!--/答案-->

                                                <!--添加选项-->
                                                <div id="OptionId"class="row " style="margin-left: 3%; margin-right: 3%; margin-top: 10px">
                                                    <div style="padding-bottom:5px;">
                                                    <label><strong style="font-size: 15px">选项:</strong></label>
                                                    &nbsp
                                                    <button id="AddbuttonId" class="btn btn-success btn-labeled pull-right " type="button" data-bind="click: $root.DataAddModel">
                                                        <span class="btn-label" ><i class="glyphicon glyphicon-plus"></i>
                                                        </span>增加选项</button>
                                                    <div style="clear:both;"></div>

                                                        </div>
                                                    <!--增加选项div-->
                                                    <div>
                                                        <!--to do-->
                                                        <table class="table table-striped table-bordered table-hover checkboxs">
                                                            <!--table head-->
                                                            <thead>
                                                                <tr>
                                                                    <th style="width: 1%;">
                                                                       
                                                                    </th>
                                                                    <!-- ko foreach: headers -->
                                                                    <th class="center " style="width: 35%">
                                                                        <a href="#" data-bind="text: displayText@*, click: $root.sort*@" style="color: black"></a>

                                                                    </th>
                                                                    <!-- /ko -->
                                                                    <th class="center" style="width: 12%">操作
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                            <!--/table head-->
                                                            <!--table body(Provider list)-->
                                                            <tbody data-bind="foreach: recordSet">
                                                                <tr class="selectable" onclick="">
                                                                    <td class="center">
                                                                      
                                                                        <input type="hidden" data-bind="value: Id, attr: { id: Id }" />
                                                                    </td>
                                                                    <td class='center'><span data-bind='text: SOptionName,attr:{
                                                                        "data-pk":Id}' class="optionName"  data-url= '/api/TestLibExt/UpdateOptionName' 
                                                                        data-type= 'text' data-name= 'optionName' data-title= '选项:'
                                                                        
                                                                        
                                                                        ></span></td>
                                                                    <td class='center'>
                                                                        <span data-bind='html: $root.formatIsTrue(IIsTrue),attr:{
                                                                        "data-pk":Id}'class="optionAns"  data-url= '/api/TestLibExt/UpdateOptionAnswer' 
                                                                        data-type= 'select' data-name= 'optionAns' data-title= '答案:'
                                                                            data-source="[{value: 1, text: '正确'},{value: 0, text: '错误'}]" 
                                                                            ></span>
                                                                    </td>


                                                                    <td class="center">
                                                                        <button class="btn-success" data-bind="click: $root.DeleteModel">
                                                                            <i class="fa fa-times"></i>
                                                                        </button>



                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                            <!--/table body( Provider list)-->

                                                        </table>
                                                    </div>
                                                    <!--/增加选项div-->


                                                </div>
                                                <!--/添加选项-->


                                              

                                                <!--知识点-->
                                                <div class="row" style="margin-left: 3%; margin-right: 3%; margin-top: 10px">
                                                    <label><strong style="font-size: 15px">知识点:</strong></label>
                                                    <label class="textarea textarea-expandable">
                                                        <textarea  id="SPointersId" class="custom-scroll" rows="3" placeholder="请输入本题所涉及的知识考点">
                                                                </textarea>
                                                    </label>
                                                </div>
                                                <!--/知识点-->

                                                     <!--难易度和区分度-->
                                                <div class="row" style="margin-left: 3%; margin-right: 3%; margin-top: 10px">
                                                      <table style="width:700px;">   
                                                           <tr>
                                                                <td style="width:120px"><label><strong>难易度</strong><label class="text-info">(10星最难)</label>:</label>

                                                                </td>
                                                               <td>
                                                                   <div id="Hard" class="rating" style="float: left; ">
                                                                       <input type="radio" id="stars-rating-10" name="stars-rating" value="10">
										<label for="stars-rating-10"><i class="fa fa-star"  ></i></label>
										<input type="radio" id="stars-rating-9" name="stars-rating" value="9">
										<label for="stars-rating-9"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-rating-8" name="stars-rating" value="8">
										<label for="stars-rating-8"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-rating-7" name="stars-rating"value="7">
										<label for="stars-rating-7"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-rating-6" name="stars-rating"value="6">
										<label for="stars-rating-6"><i class="fa fa-star"></i></label>
                                        <input type="radio" id="stars-rating-5" name="stars-rating" value="5">
										<label for="stars-rating-5"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-rating-4" name="stars-rating" value="4">
										<label for="stars-rating-4"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-rating-3" name="stars-rating" value="3">
										<label for="stars-rating-3"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-rating-2" name="stars-rating" value="2">
										<label for="stars-rating-2"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-rating-1" name="stars-rating"value="1">
										<label for="stars-rating-1"><i class="fa fa-star"></i></label>
                                                        </div>
                                                               </td>
                                                               <td style="width:120px"><label><strong>区分度</strong><label class="text-info">(10星最优)</label>：</label></td>
                                                                           <td>
                                                          <div id="Dif"class="rating"  style="float:left;" >
                                                              <input type="radio" id="stars-10" name="rating" value="10">
										<label for="stars-10"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-9" name="rating" value="9">
										<label for="stars-9"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-8" name="rating"value="8">
										<label for="stars-8"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-7" name="rating"value="7">
										<label for="stars-7"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-6" name="rating"value="6">
										<label for="stars-6"><i class="fa fa-star"></i></label>
                                         <input type="radio" id="stars-5" name="rating"value="5">
										<label for="stars-5"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-4" name="rating"value="4">
										<label for="stars-4"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-3" name="rating"value="3">
										<label for="stars-3"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-2" name="rating"value="2">
										<label for="stars-2"><i class="fa fa-star"></i></label>
										<input type="radio" id="stars-1" name="rating" value="1">
										<label for="stars-1"><i class="fa fa-star"></i></label>
                                                    </div>
                                                    </td>
                                               
                                                           </tr></table>
                                                  
                                        
                                                   
                                                  
                                                </div>
                                                <!--/难易度和区分度-->
                                            </div>
                                        </form>

                                    </div>

                                    <!--试题预览部分-->
                                    <div class="tab-pane" id="tab3" >
                                        <br>
                                        <h3><strong>第三步:</strong> 预览试题</h3>
                                        <form class="smart-form"  id="Previewform" >
                                            <div>
                                                <!--所属题型-->
                                                <div class="row" style="margin-left: 3%; margin-right: 3%">
                                                    <label><strong style="font-size: 15px">所属题型:&nbsp </strong></label>
                                                    <label data-bind="text:$root.QuestionKind"></label>
                                                    <label class="toggle state-error " style="float: right; font-size: 15px; margin-top: -1px">是否对学生公开:
                                                        <label data-bind="text:IsOpenSet"></label></label>
                                                    </div>
                                                <!--end 所属题型-->

                                                <!--标题-->
                                                <div class="row" style="margin-left: 3%; margin-right: 3%" data-bind="with:NodeValue">
                                                    <label><strong style="font-size: 15px">标 &nbsp&nbsp&nbsp&nbsp 题:&nbsp </strong></label>
                                                    <label data-bind='text:STitle' ></label>
                                                    </div>

                                                <!--end 标题-->
                                                <!--内容-->
                                                <div id="PrewContent"class="row" style="margin-left: 3%; margin-right: 3%" data-bind="with:NodeValue">
                                                    <label><strong style="font-size: 15px">内 &nbsp&nbsp&nbsp&nbsp 容:&nbsp </strong></label>
                                                    <label data-bind='html:SContent' ></label>
                                                    </div>
                                                <!--end 内容-->

                                                <!--选项-->
                                                <div id="OptionList" class="row" style="margin-left: 3%; margin-right: 3%">
                                                    <label><strong style="font-size: 15px">选项:&nbsp </strong></label>
                                                    <div style="margin-left:3%">
                                                        <table class="table table-striped table-bordered table-hover checkboxs">
                                                        
                                                            <!--table body(Provider list)-->
                                                            <tbody data-bind="foreach: recordSet">
                                                                <tr class="selectable" onclick="" >
                                                                    
                                                                    <td ><span data-bind='text: SOptionName' ></span></td>
                                                                </tr>
                                                            </tbody>
                                                            <!--/table body( Provider list)-->

                                                        </table>
                                                    </div>
                                                </div>
                                                <!--end 选项-->

                                                <!--正确答案 针对选择题，用tabel呈现 取选项中IIstrue=1的选项的名称-->
                                                <div id="optLib" class="row" style="margin-left: 3%; margin-right: 3%">
                                                    <label><strong style="font-size: 15px">正确选项:&nbsp </strong></label>

                                                             <div style="margin-left:3%">
                                                        <table class="table table-striped table-bordered table-hover checkboxs">
                                                        
                                                            <!--table body(Provider list)-->
                                                            <tbody data-bind="foreach: AnswerRecordSet">
                                                                <tr class="selectable" onclick="">
                                                                    
                                                                    <td ><span data-bind='text: SOptionName' ></span></td>
                                                                </tr>
                                                            </tbody>
                                                            <!--/table body( Provider list)-->

                                                        </table>
                                                    </div>
                                                </div>
                                                <!--end 正确答案-->

                                                <!--正确答案 其他题型，直接用label呈现-->
                                                <div id="normalLib" class="row" style="margin-left: 3%; margin-right: 3%" data-bind="with:NodeValue">
                                                    <label><strong style="font-size: 15px">答案标示:&nbsp </strong></label>
                                                    <label data-bind="text:SAnswer"></label>
                                                    
                                                </div>
                                                <!--end 正确答案-->

                                                <!--所属章节-->
                                                <div class="row" style="margin-left: 3%; margin-right: 3%" data-bind="with:NodeValue">
                                                    <label><strong style="font-size: 15px">所属章节:&nbsp </strong></label>
                                                    <label  data-bind='text:SCharpter'></label>
                                                </div>

                                                <!--end 所属章节-->

                                                <!--知识考点-->
                                                <div class="row" style="margin-left: 3%; margin-right: 3%" data-bind="with:NodeValue">
                                                    <label><strong style="font-size: 15px">知识考点:&nbsp </strong></label>
                                                    <label data-bind='text:SPointers'></label>
                                                </div>
                                                <!--end 知识考点-->

                                               



                                                    <!--难易度和区分度-->
                                                <div class="row" style="margin-left: 3%; margin-right: 3%; margin-top: 10px">
                                                      <table style="width:700px;">   
                                                           <tr>
                                                                <td style="width:120px"><label><strong>难易度</strong><label class="text-info">(10星最难)</label>:</label>

                                                                </td>
                                                               <td>
                                                                   <div id="Hardshow" class="rating " style="float: left; ">
                                                                       <input type="radio" id="rating-10" name="stars-show" value="10">
										<label for="stars-rating-10"><i class="fa fa-star"  ></i></label>
										<input type="radio" id="rating-9" name="stars-show" value="9">
										<label for="stars-rating-9"><i class="fa fa-star"></i></label>
										<input type="radio" id="rating-8" name="stars-show" value="8">
										<label for="stars-rating-8"><i class="fa fa-star"></i></label>
										<input type="radio" id="rating-7" name="stars-show"value="7">
										<label for="stars-rating-7"><i class="fa fa-star"></i></label>
										<input type="radio" id="rating-6" name="stars-show"value="6">
										<label for="stars-rating-6"><i class="fa fa-star"></i></label>
                                        <input type="radio" id="rating-5" name="stars-show" value="5">
										<label for="stars-rating-5"><i class="fa fa-star"></i></label>
										<input type="radio" id="rating-4" name="stars-show" value="4">
										<label for="stars-rating-4"><i class="fa fa-star"></i></label>
										<input type="radio" id="rating-3" name="stars-show" value="3">
										<label for="stars-rating-3"><i class="fa fa-star"></i></label>
										<input type="radio" id="rating-2" name="stars-show" value="2">
										<label for="stars-rating-2"><i class="fa fa-star"></i></label>
										<input type="radio" id="rating-1" name="stars-show"value="1">
										<label for="stars-rating-1"><i class="fa fa-star"></i></label>
                                                        </div>
                                                               </td>
                                                              
                                               
                                                               <td style="width:120px"><label><strong>区分度</strong><label class="text-info">(10星最优)</label>:</label>

                                                                </td>
                                                               <td>
                                                                   <div id="Diffdshow" class="rating" style="float: left; ">
                                                                       <input type="radio" id="Dif-10" name="show" value="10">
										<label for="stars-rating-10"><i class="fa fa-star"  ></i></label>
										<input type="radio" id="Dif-9" name="show" value="9">
										<label for="stars-rating-9"><i class="fa fa-star"></i></label>
										<input type="radio" id="Dif-8" name="show" value="8">
										<label for="stars-rating-8"><i class="fa fa-star"></i></label>
										<input type="radio" id="Dif-7" name="show"value="7">
										<label for="stars-rating-7"><i class="fa fa-star"></i></label>
										<input type="radio" id="Dif-6" name="show"value="6">
										<label for="stars-rating-6"><i class="fa fa-star"></i></label>
                                        <input type="radio" id="Dif-5" name="show" value="5">
										<label for="stars-rating-5"><i class="fa fa-star"></i></label>
										<input type="radio" id="Dif-4" name="show" value="4">
										<label for="stars-rating-4"><i class="fa fa-star"></i></label>
										<input type="radio" id="Dif-3" name="show" value="3">
										<label for="stars-rating-3"><i class="fa fa-star"></i></label>
										<input type="radio" id="Dif-2" name="show" value="2">
										<label for="stars-rating-2"><i class="fa fa-star"></i></label>
										<input type="radio" id="Dif-1" name="show"value="1">
										<label for="stars-rating-1"><i class="fa fa-star"></i></label>
                                                        </div>
                                                               </td>
                                                           </tr></table>
                                                  
                                        
                                                   
                                                  
                                                </div>
                                                <!--/难易度和区分度-->
                                                </div>
                                            </form>
                                    </div>


                                    <!--按钮组-->
                                    <div class="form-actions">
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <ul class="pager wizard no-margin">
                                                    
                                                    <li class="previous disabled">
                                                        <a href="javascript:void(0);" class="btn btn-lg btn-default">上一步</a>
                                                    </li>
                                                    

                                                    
                                                    <li class="next" ><!--test-->
                                                        <a  href="javascript:void(0);" class="btn btn-lg txt-color-darken">下一步 </a>
                                                    </li>

                                                    <li id="testid" class="next finish" style="display:none;"><a class="btn btn-lg  txt-color-darken" href="/TeacherManger/TestLib?CourseID=@ViewBag.CourseID">返回试题列表</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>

                    </div>
                    <!-- end widget content -->

                </div>
                <!-- end widget div -->

            </div>
            <!-- end widget -->

        </article>
        <!-- WIDGET END -->


    </div>
</div>


@section script{



<script src="~/Scripts/ueditor/ueditor.config.js"></script>
<script src="~/Scripts/ueditor/ueditor.all.js"></script>
<link href="~/CSS/summernote.css" rel="stylesheet" />
<script src="~/Js/plugin/bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<script src="~/Js/plugin/summernote/summernote.js"></script>
<!--/end grid code-->
<script src="~/Js/plugin/x-editable/x-editable.min.js"></script>

<script src="~/Js/TestLib.js"></script>


<script src="~/Scripts/jquery.validate.js"></script>

<script src="~/Scripts/jquery.validate-vsdoc.js"></script>


    }
